<template>
  <view class="con">
    <!-- <view class="bg_balck"></view> -->
    <view class="top">
      <view class="top1 flex flex_between">
        <view class="top1v1">
          <view class="top1v1_1 flex">
            <view class="top1v1_1v1">Daily<text>Maotai</text></view>
            <image @click="showTan_wen()" class="top1v1_1img" src="/static/index/img12.png" mode="widthFix">
            </image>
          </view>
          <view class="top1v1_2">每日一茅</view>
        </view>
        <view class="top1v2 flex" @click="showTan_video">
          <image class="top1v2_img" src="/static/index/img13.png" mode="widthFix"></image>
          <view class="top1v2_v">实操教程</view>
        </view>
      </view>
      <!-- 进度 -->
      <view class="top2">
        <view class="flex flex_between">
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
        </view>
        <view class="flex flex_between">
          <view class="top2li_2">参与预约</view>
          <view class="top2li_2">次日出签</view>
          <view class="top2li_2">中签联系</view>
          <view class="top2li_2">大额红包</view>
        </view>
      </view>
    </view>
    <!-- 预约图标 -->
    <view class="yuye flex flex_between">
      <view class="yuyeli flex" v-for="(item,index) in yuyeList" @click="goElsePro(item)">
        <image class="yuyeli_img" v-if="item.will==='y'" src="/static/add/017.png"></image>
        <image class="yuyeli_img2" :src="item.will==='y'?item.img:item.img2"></image>
        <view class="yuyeli_c">{{item.name}}</view>
      </view>
    </view>
    <!-- 茅台助理 -->
    <!-- <view class="zhul flex flex_between">
      <view class="zhulz">中签后，联系不上团队指导请联系</view>
      <view class="zhuly" @click="showTan">茅台助理</view>
    </view> -->
    <!-- 地址库 -->
    <!-- <view class="dizhi">
      <view class="dizhi_t">地址库</view>
      <view class="dizhi_c">
        <view class="dizhi_cli flex flex_between" v-for="item in list">
          <view class="dizhi_cliz flex">
            <view class="dizhi_clizc"></view>
            <view class="dizhi_clizc2">{{item.text}}</view>
          </view>
          <view class="dizhi_cliy" @click="copyText(item.text)">复制</view>
        </view>
      </view>
    </view> -->
    
    <view class="zhezhao" v-if="isShow || isShow_wen ||isShow_video" @click="hideTan"></view>
    <view class="tan tan_zhuli" v-if="isShow">
      <view class="zhes_1">
        <image class="zhes_1_img" src="/static/add/018.png" mode="widthFix"></image>
        <text class="zhes_1_t">茅台助理</text>
      </view>
    </view>
    <!-- 通用问号弹出 -->
    <view class="tan tan_wen" v-if="isShow_wen">
      <view class="tan_title">关于每日一茅</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex" v-for="(item,index) in maoTip.tips">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">{{item.content}}</view>
          </view>
        </view>

      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d2" @click="hideTan">我已知晓</view>
      </view>
    </view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
      <video id="myVideo" :src="maoTip.video" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
  </view>
</template>

<script>
  import {
    otherNav,//每日一茅导航
    otherMaoTips,//每日一茅说明、视频
    getLoginUser//获取用户信息
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        pid: '',
        isShow:false,
        isShow_wen: false,
        isShow_video: false,
        yuyeList:[],
        list:[
          {
            text:'山西省太原市晋源区兰亭御湖城东区x号楼x单元xxxx'
          },
          {
            text:'山西省太原市晋源区兰亭御湖城南区x号楼x单元xxxx'
          },
          {
            text:'山西省太原市晋源区兰亭御湖城西区x号楼x单元xxxx'
          }
        ],
        maoTip:{} //每日一茅说明、视频
      };
    },
    onLoad(options) {
      // this.otherNavFun() //每日一茅导航
      // this.getOtherButieTipsFun() // 获取补贴专区说明
      console.log('进入每日一茅--获取options')
      const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容
      console.log(options)
      console.log(options.pid)
      console.log(q)
      if (options.pid) {
      	// 通过分享页面进的
      	console.log('通过分享页面进的')
      	uni.setStorageSync('pid', options.pid)
      
      } else if (q) {
      	// 通过扫描二维码进的
      	console.log('通过扫描二维码进的')
      	var match = q.match(/\?(.+)/);
      	if (match && match.length > 1) {
      		var queryString = match[1].split("=")[1]; // 获取到的查询字符串
      		console.log('pid是多少'); // 输出: data=12345
      		console.log(queryString); // 输出: data=12345
      		uni.setStorageSync('pid', queryString)
      	} else {
      		console.log('No query string found.');
      	}
      }
      this.getLoginUserFun()//获取用户信息--通过接口
      
    },
    onShow() {
      this.isLogin = uni.getStorageSync('isLogin') || 1
      this.otherNavFun() //每日一茅导航
      this.getotherMaoTipsFun() // 获取每日一茅说明、视频
      if (this.isLogin === 1) {
      	console.log('未授权登录')
        uni.hideShareMenu()
      }else{
        uni.showShareMenu({
        	withShareTicket: true,
        	menus: ["shareAppMessage", "shareTimeline"]
        })
      }
    },
    methods: {
      // 获取用户信息--通过接口
      getLoginUserFun() {
      	let that = this
      	getLoginUser({
      		openid: this.openid,
      		pid: uni.getStorageSync('pid') || ''
      	}).then(res => {
      		console.log('每日一茅--获取用户信息')
      		console.log(res)
      		if (res.error_code === 0) {
      			uni.setStorageSync('userInfo', that.userInfo);
      			that.userInfo = that.userInfo
      			that.$forceUpdate()
      		} else {
      			uni.showToast({
      				icon: 'none',
      				title: res.msg
      			})
      		}
      	})
      },
      // 获取-每日一茅导航
      otherNavFun(){
        let that = this
        otherNav().then(res=>{
          console.log('每日一茅导航')
          console.log(res)
          if(res.error_code===0){
            that.yuyeList = res.data.nav
          }else{
            uni.showToast({
              icon:'none',
              title:res.msg
            })
          }
        })
      },
      // 获取每日一茅说明、视频
      getotherMaoTipsFun() {
        otherMaoTips().then(res => {
          console.log('获取每日一茅说明、视频')
          console.log(res)
          if (res.error_code === 0) {
            this.maoTip = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 点击跳转其他小程序---可预约的情况下
      goElsePro(item){
        if(item.will==='y'){
          wx.navigateToMiniProgram({
            shortLink:item.url,
            // develop开发版；trial体验版；release正式版
            envVersion: 'release', 
            success(res) {
              // 打开成功
              console.log("跳转成功！",res);
            } 
          })
        }else{
          // uni.showToast({
          //   icon:'none',
          //   title:''
          // })
        }
      },
      showTan() {
        this.isShow = true
      },
      showTan_wen() {
        this.isShow_wen = true
      },
      showTan_video() {
        this.isShow_video = true
      },
      hideTan() {
        this.isShow = this.isShow_wen = this.isShow_video = false
      },
      hideTan_goDetail() {
        this.isShow = this.isShow_wen = this.isShow_video = false
        uni.navigateTo({
          url: '/packageA/index/subsidyZoneDe'
        })
      },
      // 点击"复制"
      copyText(text){
        uni.setClipboardData({
          data: text,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
    },
    // 分享微信好友
    onShareAppMessage(event) {
      console.log(event);
      return {
        title: '动动小手，几百到手',
        path: '/packageA/index/reservation?pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    },
    //分享到朋友圈
    onShareTimeline(event) {
      console.log(event);
      return {
        title: '动动小手，几百到手',
        path: '/packageA/index/reservation?pid=' + uni.getStorageSync('userInfo').id,
        query: 'pid=' + uni.getStorageSync('userInfo').id,
        // imageUrl: imageUrl
      }
    }
    
  }
</script>

<style scoped lang="scss">
  .con {
    .top {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      z-index: 1;
      padding-top: 54rpx;

      .top1 {
        width: 100%;
        height: auto;
        align-items: normal;

        .top1v1 {
          width: 400rpx;
          height: 140rpx;
          border-radius: 0px 100rpx 100rpx 0px;
          background-color: rgba(249, 191, 65, 1);
          padding: 16rpx 30rpx;
          box-sizing: border-box;

          .top1v1_1 {
            .top1v1_1v1 {
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
              font-weight: bold;
              margin-top: 5rpx;

              text {
                font-weight: 100;
              }
            }

            .top1v1_1img {
              width: 30rpx;
              height: 30rpx;
              position: relative;
              top: -15rpx;
            }
          }

          .top1v1_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: 6rpx;
          }
        }

        .top1v2 {
          width: 220rpx;
          height: 68rpx;
          border-radius: 100rpx;
          background-color: rgba(249, 191, 65, 1);
          justify-content: center;
          margin-right: 30rpx;

          .top1v2_img {
            width: 28rpx;
            height: auto;
            margin-right: 10rpx;
          }

          .top1v2_v {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }
        }

      }

      .top2 {
        width: 650rpx;
        height: auto;
        margin: 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #d3d3d3;
        padding: 30rpx 0;
        margin-top: 50rpx;
        margin-bottom: 20rpx;
        .top2li_2 {
        	color: rgba(0, 0, 0, 1);
        	font-size: 28rpx;
        	margin-top: -20rpx;
        }
        .top2li_1 {
        	width: 16rpx;
        	height: 16rpx;
        	border-radius: 100%;
        	margin: 0 auto;
        	position: relative;
        	top: -38rpx;
        	background-color: rgba(137, 137, 137, 1);
        }
        .width104{
          width: 104rpx;
        }
        .top2li {
          width: 25%;
          text-align: center;
          .top2li_2.top2li_2_left {
            text-align: left;
          }
          .top2li_2.top2li_2_right {
            text-align: right;
          }
        }
      }
    }





    .zhes_1 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 32rpx;
      justify-content: center;
      
      .zhes_1_img {
        width: 360rpx;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 32rpx;
      }

      .zhes_1_t {
        color: rgba(16, 16, 16, 1);
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .zhes_2 {
      width: 100%;
      height: auto;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 8rpx;

      .zhes_2li {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        font-weight: bold;

        text {
          font-family: 'AvantGardeFont';
        }
      }
    }

    .zhes_3 {
      height: 32rpx;
      line-height: 32rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .zhes_4 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      padding: 20rpx 30rpx;
      color: rgba(249, 65, 65, 1);
      font-size: 24rpx;
      box-sizing: border-box;
      line-height: 40rpx;
      margin-bottom: 48rpx;
    }

    .zhes_5 {
      width: 100%;
      height: 72rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      line-height: 72rpx;
    }

    .tan {
      margin-top: -272rpx;
    }
  }
  .tan.tan_zhuli{
    width: 440rpx;
    margin-left:-220rpx;
    padding-bottom: 0;
  }

  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }

  .tan.tan_video {
    margin-top: -552rpx;
  }

  video {
    width: 650rpx;
    height: 1105rpx;
  }

  .zhen_add {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    margin-top: 12rpx;
  }
  .yuye{
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    position: relative;
    .yuyeli{
      width: 346rpx;
      height: 140rpx;
      border-radius: 10px;
      background-color: rgba(255,255,255,1);
      position: relative;
      margin-bottom: 20rpx;
      justify-content: center;
      align-items: center;
      .yuyeli_img{
        width: 76rpx;
        height: 76rpx;
        position: absolute;
        top:0;
        left: 0;
      }
      .yuyeli_img2{
        width: 56rpx;
        height: 56rpx;
        display: block;
        margin-right: 12rpx;
      }
      .yuyeli_c{
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        text-align: center;
        line-height: 40rpx;
        margin-top: 8rpx;
      }
    }
  }
  .zhul{
    width: 100%;
    height: 60rpx;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,1);
    padding:30rpx 0;
    position: relative;
    .zhulz{
      color: rgba(0,0,0,1);
      font-size: 24rpx;
      margin-left: 30rpx;
    }
    .zhuly{
      width: 220rpx;
      height: 60rpx;
      border-radius: 100rpx;
      background-color: rgba(249,191,65,1);
      text-align: center;
      color: rgba(0,0,0,1);
      font-size: 24rpx;
      line-height: 60rpx;
      margin-right: 30rpx;
    }
  }
  .dizhi{
    width: 100%;
    height: auto;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    padding-top: 30rpx;
    position: relative;
        background: #eee;
        border-radius: 20rpx;
    .dizhi_t{
      line-height: 40rpx;
      color: rgba(0,0,0,1);
      font-size: 28rpx;
      margin-bottom: 40rpx;
      font-weight: bold;
    }
    .dizhi_c{
      width: 100%;
      height: auto;
      .dizhi_cli{
        width: 100%;
        height: auto;
        align-items: normal;
        margin-bottom: 44rpx;
        .dizhi_cliz{
          align-items: normal;
          width: 80%;
          .dizhi_clizc{
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background-color: rgba(0,0,0,1);
            margin-right: 16rpx;
            margin-top: 8rpx;
          }
          .dizhi_clizc2{
            line-height: 28rpx;
            color: rgba(16,16,16,1);
            font-size: 28rpx;
            line-height: 36rpx;
            width: 90%;
          }
        }
        .dizhi_cliy{
          width: 132rpx;
          height: 36rpx;
          line-height: 36rpx;
          border-radius: 32rpx;
          background-color: rgba(211,211,211,1);
          color: rgba(0,0,0,1);
          font-size: 24rpx;
          text-align: center;
        }
      }
    }
  }
</style>